﻿@page "/TextBox/Default-Functionalities"

@using Syncfusion.Blazor.Inputs

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the default functionalities of the <code>TextBox</code> component. Type a character in the TextBox element or focus-in to the TextBox for floating the label text. The label will be positioned back to TextBox on focus-out without value.</p>
</SampleDescription>
<ActionDescription>
    <p>A TextBoxes are an input element that allows to get input from the user. It allows the user either to edit or display the input values.</p><br>
        <table style='width:100%'>
            <tr>
                <th>Types</th>
                <th>Description</th>
            </tr>
            <tr>
                <td>Outlined & Filled Textbox</td>
                <td>
                    You can render the following two types of text fields in the material theme by adding <b>e-outline</b> and <b>e-filled</b> class to CssClass API
                    <ul>
                        <li>Filled text fields</li>
                        <li>Outlined text fields</li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>Floating Label</td>
                <td>
                    You can render floating textbox with <b>e-float-input</b> class added and need to maintain the following structure of elements.
                    <ul>
                        <li>Create group element with <b>e-float-input</b> class added.</li>
                        <li>Input element with<b> required</b> attribute.</li>
                        <li>Span element with<b> e-float-line</b> class.</li>
                        <li>Label element with<b> e-float-text</b> class.</li>
                    </ul>
                </td>
            </tr>
             <tr>
                 <td>Floating Label & Elements</td>
                    <td>You can render floating textbox with icons added within the group element <b>e-input-group</b> and need to maintain the following structure of elements.
                        <ul>
                            <li>Create group element with <b>e-float-input</b> class added.</li>
                            <li>Input element with<b> required</b> attribute.</li>
                            <li>Span element with<b> e-float-line</b> class.</li>
                            <li>Label element with<b> e-float-text</b> class.</li>
                            <li>Append or prepend the span element with class <b>e-input-group-icon</b> added.</li>
                        </ul>
                    </td>
            </tr>
            <tr>
                <td>Default TextBox</td>
                <td>
                    <div style = 'padding-bottom: 10px' >
                        You can render textbox by adding class as <b>e-input</b>.You can also render textbox as group by adding
                        parent element with <b>e-input-group</b> class added.
                    </div>
                </td>
                </tr>
                <tr>
                    <td>RTL TextBox</td>
                    <td>
                        <div style = 'padding-bottom: 10px' >Set <b>e - input</b> and <b>e - rtl</b> classes to render textbox in right to left direction. For rendering group in RTL mode, class list will be like <b> e-input-group e-rtl</b>.
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>Disabled TextBox</td>
                    <td>
                        <div style = 'padding-bottom: 10px' > You can set html disabled attribute to textbox. For parent group element, you can disable it by adding <b>e-disabled</b> class.</div>
                    </td>
                </tr>
                <tr>
                    <td>Readonly TextBox</td>
                    <td>
                         <div style = 'padding-bottom: 10px' > You can set html readonly attribute to textbox.</div>
                    </td>
                </tr>
                <tr>
                    <td>Validation states</td>
                    <td>
                        <div style = 'padding-bottom: 10px' >
                            You can apply validation states success, warning, error to the textbox with the corresponding classes added
                            to the input element such as <b>e-success</b>, <b>e-warning</b>, <b>e-error</b>.
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>Sizing</td>
                    <td>
                        <div style = 'padding-bottom: 10px' >
                            You can render small sizing textbox by adding<b> e-small</b> class to the input element. By default normal
                            size is considered.
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>Input & elements</td>
                    <td>You can render textbox with icons in the below format,
                        <ul>
                            <li>Create group element with <b>e-input-group</b> class added.</li>
                            <li>Add input element with <b>e-input</b> and span element with<b> e-input-group-icon</b> inside the input group element.</li>
                            <li> You can add the icon either before or after the textbox by placing <b> e-input-group-icon</b> class named element in specific place. </li>
                        </ul>
                    </td>
                </tr>
            </table><br>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row material2">
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                <b>Outlined and Filled</b>
            </div>
        </div>
        <div class="row material2">
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                <SfTextBox CssClass="e-outline" Placeholder="Outlined" FloatLabelType="@FloatLabelType.Auto"></SfTextBox>
            </div>
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                <SfTextBox CssClass="e-filled" Placeholder="Filled" FloatLabelType="@FloatLabelType.Auto"></SfTextBox>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                <b>Floating Label</b>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                <SfTextBox Placeholder="First Name" FloatLabelType="@FloatLabelType.Auto"></SfTextBox>
            </div>
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                <SfTextBox CssClass="e-rtl" Placeholder="Last Name" FloatLabelType="@FloatLabelType.Auto"></SfTextBox>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
                <SfTextBox Placeholder="Country" FloatLabelType="@FloatLabelType.Auto"></SfTextBox>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                <b>Inputs</b>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                <SfTextBox Type="InputType.Text" Placeholder="Enter Name"></SfTextBox>
            </div>
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                <SfTextBox Placeholder="Last Name" CssClass="e-rtl"></SfTextBox>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                <SfTextBox Placeholder="Password" Value="Password" Type="InputType.Password"></SfTextBox>
            </div>
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                <SfTextBox Type="InputType.Email" Placeholder="Enter Email"></SfTextBox>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                <SfTextBox Enabled="false" Placeholder="Disabled" Type="InputType.Text"></SfTextBox>
            </div>
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                <SfTextBox Type="InputType.Text" Placeholder="ReadOnly" Readonly="true"></SfTextBox>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                <b>Validation States</b>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-4 col-sm-4 col-lg-4 col-md-4">
                <SfTextBox Placeholder="Success" CssClass="e-success"></SfTextBox>
            </div>
            <div class="col-xs-4 col-sm-4 col-lg-4 col-md-4">
                <SfTextBox Placeholder="Warning" CssClass="e-warning"></SfTextBox>
            </div>
            <div class="col-xs-4 col-sm-4 col-lg-4 col-md-4">
                <SfTextBox Placeholder="Error" CssClass="e-error"></SfTextBox>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                <b>Sizing</b>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6 custom-padding-05">
                <SfTextBox Placeholder="Small" CssClass="e-small" Type="InputType.Text"></SfTextBox>
            </div>
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                <SfTextBox Placeholder="Normal" CssClass="e-normal" Type="InputType.Text"></SfTextBox>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                <b>Input &amp; Elements</b>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                <SfTextBox @ref="date" Placeholder="Date of Birth" Created="@onCreateDate"></SfTextBox>
            </div>
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                <SfTextBox @ref="upload" Placeholder="Upload Picture" Created="@onCreateUpload"></SfTextBox>
            </div>
        </div>
    </div>
</div>

<style>
    .e-input-picture::before {
        content: '\e335';
        font-family: e-icons;
    }

    .e-input-calendar::before {
        content: '\e901';
        font-family: e-icons;
        font-size: 13px;
    }

    .content-wrapper {
        width: 90%;
        margin: 0 auto;
        min-width: 85px;
    }

        .content-wrapper div.row {
            padding: 15px 0px;
        }

    .custom-padding-05 {
        padding-top: 5px;
    }

    @@media only screen and (max-width: 480px) {
        .content-wrapper {
            width: 92%;
        }

        .col-xs-6,
        .col-xs-4,
        .col-xs-12 {
            padding: 10px 5px;
            width: 100%;
        }

        .content-wrapper div.row {
            padding: 0px;
        }
    }

    #description td {
        vertical-align: top;
    }

    .e-outline.e-float-input,
    .e-outline.e-float-input.e-control-wrapper {
        margin-top: 0;
    }

    .fabric .row.material2,
    .bootstrap .row.material2,
    .bootstrap4 .row.material2,
    .highcontrast .row.material2 {
        display: none;
    }

    .e-upload-picture::before {
        content: '\e335';
        font-family: e-icons;
    }

    .bootstrap4 .e-upload-picture::before {
        content: '\e769';
        font-family: e-icons;
    }
</style>

@code  {
    SfTextBox date;
    SfTextBox upload;

    public void onCreateDate()
    {
        this.date.AddIconAsync("append", "e-date-icon");
    }

    public void onCreateUpload()
    {
        this.upload.AddIconAsync("prepend", "e-upload-picture");
    }
}
